<template>
  <view class="pay-swiper">
    <swiper class="box" :current="swiperIndex" @change="onSwiperChange" circular autoplay :interval="2000"
      :duration="500">
      <swiper-item v-for="(itm, idx) in (swiperList || [])" :key="idx">
        <image class="item" :src="itm" mode="aspectFit"></image>
      </swiper-item>
    </swiper>
    <cover-view class="dots" v-if="swiperList.length && swiperList.length > 1">
      <cover-view v-for="(_, idx) in swiperList" :class="`${swiperIndex === idx && 'active'} dot`"
        :key="idx"></cover-view>
    </cover-view>
  </view>
</template>

<script setup>
import { ref } from "vue"
const swiperIndex = ref(0)
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
const { swiperList } = defineProps({
  swiperList: Array,
})
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
